<template>
  <div class="picture-search-form">
    <!-- 搜索表单 -->
    <a-form layout="inline" :model="searchParams" @finish="doPictureSearch" class="search-form">
      <a-form-item name="searchText">
        <a-input-search
          v-model:value="searchParams.searchText"
          placeholder="从名称和简介搜索. . ."
          size="large"
          @search="onSearch"
          allow-clear
          class="search-input"
        >
          <template #enterButton>
            <a-button
              type="primary"
              :icon="h(FilterOutlined)"
              style="background: #4caf50; font-size: 14px !important"
              @click="doShowSearchModal"
              >筛选</a-button
            >
          </template>
        </a-input-search>
      </a-form-item>
    </a-form>

    <!-- 弹出的对话框的高级搜索 -->
    <a-modal v-model:open="open" title="高级搜索" :footer="false" @cancel="doClose">
      <!-- 高级搜索表单 -->
      <a-form
        :model="searchParams"
        @finish="doSubmitAdvancedSearchForm"
        class="advanced-search-form"
      >
        <a-form-item label="分类" name="category">
          <a-auto-complete
            v-model:value="searchParams.category"
            :options="categoryOptions"
            placeholder="请输入分类"
            allowClear
            class="form-control"
          />
        </a-form-item>

        <a-form-item label="标签" name="tags">
          <a-select
            v-model:value="searchParams.tags"
            :options="tagOptions"
            mode="tags"
            placeholder="请输入标签"
            allowClear
            class="form-control"
          />
        </a-form-item>

        <a-form-item label="日期" name="date">
          <a-range-picker
            v-model:value="dateRange"
            :placeholder="['编辑开始日期', '编辑结束时间']"
            format="YYYY-MM-DD HH:mm:ss"
            :presets="rangePresets"
            @change="onRangeChange"
            class="form-control"
          />
        </a-form-item>

        <!-- 提交按钮组 -->
        <a-form-item class="action-buttons">
          <a-space>
            <a-button type="default" @click="doClear" class="animated-btn">清空</a-button>
            <a-button type="primary" html-type="submit" class="animated-btn primary-btn"
              >搜索</a-button
            >
          </a-space>
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script lang="ts" setup>
import { h, onMounted, reactive, ref } from 'vue'
import { listPictureTagCategoryUsingGet } from '@/api/pictureController'
import { message } from 'ant-design-vue'
import dayjs from 'dayjs'
import { FilterOutlined } from '@ant-design/icons-vue'

// 定义父组件传递的属性
interface Props {
  onSearch?: (searchParams: API.PictureQueryDTO) => void
}

const props = defineProps<Props>()

// -------------- 对话框模块 ---------------------
const open = ref<boolean>(false)
// 弹出模态框进行高级搜索
const doShowSearchModal = () => {
  open.value = true
}

// 提交表单的高级搜索处理
const doSubmitAdvancedSearchForm = async () => {
  // 关闭对话框
  open.value = false
  // 重置页码（与主表单保持一致）
  searchParams.current = 1
  // 触发父组件的搜索，此时 searchParams 已包含所有条件（关键词+分类+标签+日期）
  props.onSearch?.(searchParams)
}

// 清空表单
const doClear = () => {
  // 取消所有对象的值
  Object.keys(searchParams).forEach((key) => {
    // 使用类型断言确保可以索引
    ;(searchParams as Record<string, any>)[key] = undefined
  })
  // 重置日期选择
  dateRange.value = []
  props.onSearch?.(searchParams)
}

// 点击右上角关闭时触发
const doClose = () => {
  // 清空所有搜索参数
  searchParams.searchText = ''
  searchParams.category = ''
  searchParams.tags = []
  searchParams.startEditTime = undefined
  searchParams.endEditTime = undefined
  // 清空日期选择器
  dateRange.value = []
  // 触发搜索（此时为无条件查询）
  props.onSearch?.(searchParams)
}

// -------------- 日期选择模块 ---------------------
const dateRange = ref<[]>([])
/**
 * 日期范围更改时触发
 * @param dates
 * @param dateStrings
 */
const onRangeChange = (dates: any[], dateStrings: string[]) => {
  if (dates.length > 2) {
    searchParams.startEditTime = dates[0].toDate()
    searchParams.endEditTime = dates[1].toDate()
  } else {
    searchParams.startEditTime = undefined
    searchParams.endEditTime = undefined
  }
}
// 日期选择的预设
const rangePresets = ref([
  { label: '过去一天', value: [dayjs().add(-1, 'd'), dayjs()] },
  { label: '过去三天', value: [dayjs().add(-3, 'd'), dayjs()] },
  { label: '过去一周', value: [dayjs().add(-7, 'd'), dayjs()] },
  { label: '过去一个月', value: [dayjs().add(-30, 'd'), dayjs()] },
  { label: '过去三个月', value: [dayjs().add(-90, 'd'), dayjs()] },
])

// ---------------- 查询模块 ---------------------
// 定义查询参数
const searchParams = reactive<API.PictureQueryDTO>({})

// 提交表单的搜索处理
const doPictureSearch = async () => {
  // 重置页码(重要)
  searchParams.current = 1
  // 触发父组件传递的搜索处理
  props.onSearch?.(searchParams)
}

// 分类标签和图片标签
const categoryOptions = ref<string[]>([])
const tagOptions = ref<string[]>([])

// 获取分类标签和图片标签
const getPictureTagCategory = async () => {
  const res = await listPictureTagCategoryUsingGet()
  if (res.data?.code === 0 && res.data?.data) {
    // @ts-ignore
    categoryOptions.value = (res.data.data.categoryList ?? []).map((category) => ({
      value: category,
      label: category,
    }))
    // @ts-ignore
    tagOptions.value = (res.data.data.tagList ?? []).map((tag) => ({
      value: tag,
      label: tag,
    }))
  } else {
    message.error('加载标签失败: ' + res.data?.message)
  }
}

// 定义钩子函数，页面挂载时加载数据
onMounted(() => {
  // 加载标签和分类数据
  getPictureTagCategory()
})
</script>

<style scoped>
/* 基础容器样式 */
.picture-search-form {
  border-radius: 12px; /* 大圆角更柔和 */
  padding: 24px;
  margin-bottom: 32px;
  /* 新增：让容器占满宽度 */
  width: 100%;
  box-sizing: border-box; /* 避免 padding 撑大容器 */
}

/* 让搜索表单居中的核心样式 */
.search-form {
  display: flex;
  justify-content: center; /* 水平居中 */
  width: 100%; /* 占满父容器宽度 */
  min-width: 280px; /* 最小宽度，适配手机 */
  border-radius: 12px;
  transition: all 0.3s ease; /* 收缩时的过渡动画 */
}

.search-input {
  /* 替换原有的 min-width，改为弹性尺寸 */
  width: 600px;
  max-width: 800px; /* 最大宽度限制，避免过大 */
  min-width: 280px; /* 最小宽度，适配手机 */
  border-radius: 12px;
  transition: all 0.3s ease; /* 收缩时的过渡动画 */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* 高级搜索表单布局优化 */
.advanced-search-form {
  margin-top: 32px;
  display: flex;
  flex-direction: column;
  gap: 24px; /* 增大表单项间距 */
}

/* 表单项添加阴影和过渡效果 */
.form-control {
  width: 100%; /* 输入框占满宽度 */
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  padding: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  transition: all 0.3s ease;
}

.form-control:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.07);
  border-color: #d1d5db;
}

/* 按钮组布局 */
.action-buttons {
  display: flex;
  justify-content: flex-end;
  gap: 16px;
  margin-top: 16px;
}

/* 按钮划入动画效果 */
.animated-btn {
  border-radius: 8px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

/* 按钮hover时的划入动画 */
.animated-btn::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.5s ease;
}

.animated-btn:hover::after {
  left: 100%;
}

/* 主按钮特殊样式 */
.primary-btn {
  background: #4caf50;
  border-color: #4caf50;
}

.primary-btn:hover {
  background: #43a047;
  border-color: #43a047;
}

/* 表单项标签样式 */
.ant-form-item-label > label {
  font-weight: 500;
  color: #4b5563;
}
</style>
